<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX</title>
    <!-- 1. 导入工具包 -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- 将 JSX 语法, 转为 JS  -->
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <!-- 2. 容器 -->
    <div id="root"></div>
    <!-- 3. 创建标签并声明 type="text/babel" -->
    <script type="text/babel">
      // 4. 创建虚拟 DOM 对象
      // let vdom = <h1>Hello React</h1>; // JSX  相当于 React.createElement('h1', null, 'Hello React')
      let vdom = <div>
          <h1 title="歌手">五月天</h1>
          <p id="text">因为痛苦太有价值，因为回忆太珍贵，所以我们更要继续往前走</p>
        </div>; 

      //5. 渲染
      ReactDOM.render(vdom, document.querySelector('#root'))

    </script>
  </body>
</html>
